@extends('layouts.mobile_main')

@section('title', '买单成功')

@section('resources')
    @parent
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <link rel="stylesheet" href="{{ env('CSS_DOMAIN') }}/css/public.css?v={{env('CSS_VERSION')}}">
    <script src="{{ env('JS_DOMAIN') }}/js/adaptation.js?v={{env('JS_VERSION')}}"></script>
    <style>
		.pay_sjxqtext .address{display: inline-block;width: 5rem;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;position: relative;top: 0.1rem;}
		.pay_evaluate1{height: 3rem;background-color: #fff;margin-top: 0.2rem;position: relative;}
		.pay_evaluate1 .wait_evaluate{width: 1.6rem;position: absolute;top: 0;left: 0;}
		.pay_evaluate1 p{text-align: center;}
		.pay_evaluate1 .star{padding-top: 0.5rem;}
		.pay_evaluate1 .star img{width: 1.2rem;}
		.red_envelope{background: rgba(0,0,0,0.3);width: 100%;height: 100%;position: fixed;top: 0;left: 0;}
		.red_envelope .red_packed{position: absolute;top: 4rem;left: 0.65rem;}
		.red_envelope .header{position: relative;}
		.red_envelope .header img{width: 9.5rem;float: left;}
		.red_envelope .footer img{width: 9.5rem;position: relative;}
		.red_envelope .red_content{width: 7.65rem;margin-left: 0.88rem;position: relative;background-color: #D84232;}
		.red_envelope ul{position: absolute;top: -2rem;left: 0.9rem;overflow: scroll;}
		.red_envelope ul li{width: 5.8rem;height: 1.8rem;position: relative;padding-bottom: 0.2rem;}
		.red_envelope ul li img{width: 5.8rem;position: absolute;top: 0;left: 0;}
		.red_envelope ul li .content{position: absolute;top: 0;left: 0;width: 5.8rem;height: 1.8rem;}
		.red_envelope ul li .content .content_left{overflow: hidden;width: 2.1rem;}
		.red_envelope ul li .content .content_right{overflow: hidden;width: 3.4rem;margin-left: 0.1rem;}
    </style>
@endsection

@section('content')
<div class="paysu_outer">
	<header class="oh pay_success">
		<p class="fz_48 fl co_violet">买单成功</p>
		<a href="/mobile/wallet/index" class="fz_34 fr co_violet">完成</a>
	</header>
	<section class="paysu_center">
		<div class="oh paysu_sjxq">
			<p class="fz_92" style="text-align: center;margin: 0.2rem 0 0.1rem;">{{$orderamount}}</p>
			<p class="fz_48" style="text-align: center;">本次消费帮您节省了<span class="co_violet">{{($orderamount+$redenvelopeamount)/2}}元</span></p>
		</div>
		<div class="oh paysu_sjxq">
			<img class="fl" src="{{$shop['logo']}}" alt="">
			<div class="fl pay_sjxqtext" style="width: 6.5rem;">
				<h2 class="fz_44">{{$shopname}}</h2>
				<p class="fz_34 co_gray">电话：<span>{{$shop['contactnumber']}}</span></p>
				<p class="fz_28 co_gray">地址：<span class="address">{{$shop['address']}}</span></p>
			</div>
		</div>
		<ul class="paysu_xfxx">
			<li class="oh fz_40">
				<p class="fl">消费金额</p>
				<span class="fr">{{$orderamount}}</span>
			</li>
			<li class="oh fz_40">
				<p class="fl">红包</p>
				<span class="fr">{{$redenvelopeamount}}</span>
			</li>
			<li class="oh fz_40">
				<p class="fl">合计实付</p>
				<span class="fr">{{$actualamount}}</span>
			</li>
			<li class="oh fz_40">
				<p class="fl">支付时间</p>
				<span class="fr">{{date('Y-m-d H:i', strtotime($created_at))}}</span>
			</li>
			<li class="oh fz_40">
				<p class="fl">订单号</p>
				<span class="fr">{{$ordernumber}}</span>
			</li>
		</ul>
		<a href="/mobile/wallet/comment?ordernumber={{$ordernumber}}&shopname={{$shopname}}"><!-- TODO 要加上对应的评论商家 -->
			<div class="pay_evaluate1">
				<img class="wait_evaluate" src="/images/wait_evaluate.png" alt="">
				<p class="star">
					<img src="/images/empty.png" alt="">
					<img src="/images/empty.png" alt="">
					<img src="/images/empty.png" alt="">
					<img src="/images/empty.png" alt="">
					<img src="/images/empty.png" alt="">
				</p>
				<p class="fz_40 co_gray">快来评价哟~</p>
			</div>
		</a>
	</section>
	<!-- 领取红包 -->
	@if($bonusid != 0)
        <nav class="red_envelope">
            <div class="red_packed">
                <div class="header">
                    <img src="{{env('IMAGE_DOMAIN')}}images/redhead.png?v={{env('IMAGE_VERSION')}}" alt="">
                    <img class="red_packed_close" style="width: 0.8rem;position: absolute;top: -0.4rem;right: 0.48rem;" src="{{env('IMAGE_DOMAIN')}}images/red_close.png?v={{env('IMAGE_VERSION')}}" alt="">
                    <div style="clear: both;"></div>
                </div>
                <div class="red_content">
                    <ul>
                        <li class="red_content_money">
                            <img src="{{env('IMAGE_DOMAIN')}}images/red_w.png?v={{env('IMAGE_VERSION')}}" alt="">
                            <div class="content">
                                <p class="fl content_left">
                                    <!-- <span class="co_orange fl" style="font-size: 0.9rem;margin-left: 0.5rem;margin-top: 0.5rem;">12.0</span> -->
                                @if(isset($bonusinfo['amount']))
                                    <span class="co_orange fl" style="font-size: 0.64rem;margin-left: 0.3rem;margin-top: 0.55rem;width: 1.7rem;text-align: center;">{{$bonusinfo['amount']}}</span>
                                @endif
                                @if(isset($bonusinfo['minimumamount']) && ($bonusinfo['minimumamount'] != 0.00))
                                    <span class="co_orange fl" style="font-size: 0.3rem;margin-left: 0.3rem;width: 1.7rem;text-align: center;">满{{$bonusinfo['minimumamount']}}可用</span>
                                @endif
                                </p>
                                <p class="fr content_right">
                                @if(isset($bonusinfo['cityname']))
                                    <span class="fl" style="font-size: 0.3rem;width: 100%;text-align: center;margin-top: 0.4rem;">限{{$bonusinfo['cityname']}}使用</span>
                                    <span class="fl" style="font-size: 0.3rem;width: 100%;text-align: center;">有效期至 {{date('Y-m-d', strtotime($bonusinfo['endtime']))}}</span>
                                @endif
                                </p>
                            </div>
                        </li>
                    </ul>
                </div>

                <p class="footer">
                    <img src="{{env('IMAGE_DOMAIN')}}images/redfoot.png?v={{env('IMAGE_VERSION')}}" alt="">
                </p>
            </div>
        </nav>
	@endif
</div>
@endsection

@section('scriptResources')
    @parent
    <script>
        window.onresize=function(){
            pagesp();
        }
        $(function(){
            var paysu_outer_h=$(window).height();
            $(".paysu_outer").css({"min-height":paysu_outer_h});
        })
        $(".red_packed_close").click(function(){
        	$(".red_envelope").hide();
        })
    </script>
@endsection